<template>
  <div id="app">
    <div class="box">
      <KPTop title="课程详情"></KPTop>
      <div class="course-thumb">
        <img :src="msg.course&&msg.course.thumb" width="100%" mode="widthFix" />
      </div>
      <div class="course-title">{{msg.course&&msg.course.title}}</div>
      <div class="stat">
        <div class="item charge">
          <span class="small">￥</span>
          {{msg.course&&msg.course.charge}}
        </div>
        <div class="item user-count">
          <span>{{msg.course&&msg.course.user_count}}人已订阅</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="body">
        <div class="tabs">
          <div :class="num==1?'item-tab active':'item-tab'" @click.stop="changeTab(1)">
            介绍
            <div :class="num==1?'actline':''"></div>
          </div>
          <div :class="num==2?'item-tab active':'item-tab'" @click.stop="changeTab(2)">
            目录
            <div :class="num==2?'actline':''"></div>
          </div>
          <div :class="num==3?'item-tab active':'item-tab'" @click.stop="changeTab(3)">
            评论
            <div :class="num==3?'actline':''"></div>
          </div>
        </div>
        <div class="coursr-desc" :class="num==1?'show':'hide'">
          <div class="desc" style="font-size: 14px;">
            <p>
              <img
                style="width:100%;height:auto;"
                src="http://1.14.239.98/storage/images/BtNPltNPJ49hV1xeSfoqGn9XgCJssqi1sDYo1qqO.png"
              />
            </p>
          </div>
        </div>
        <div class="course-chapter-box" :class="num==2?'show':'hide'">
          <div class="chapter-item" v-for="j in chapters[0]" :key="j.id">
            <div class="chapter-name">
              {{j.title}}
              <img
                width="15"
                height="15"
                src
                class="normaltran trans"
                style="float: right; cursor: pointer;"
              />
            </div>
            <div class="chapter-videos-box">
              <div class="video-item">
                <div class="video-title">
                  <span class="free">试看</span>
                  <span class="text"></span>
                </div>
                <div class="video-duration">
                  <span>02:00</span>
                </div>
              </div>
            </div>
          </div>
          <!---->
        </div>
        <div class="course-comments-box" :class="num==3?'show':'hide'">
          <div class="comment-item" v-for="i in comment" :key="i.id">
            <div class="avatar">
              <img
                src="http://1.14.239.98/storage/images/xmjlH9cTvKdpmkxvnUIRIuG8nwFUI8ktlJbg40mP.png"
                width="32"
                height="32"
              />
            </div>
            <div class="content">
              <div class="nickname">{{user.nick_name}}</div>
              <div class="time">5 小时前</div>
              <div class="text">
                <div>{{i.render_content}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="block"></div>
      <div class="bottom-bar" v-if="isLogin">
        <div class="collect-button">
          <div class="icon">
            <img width="24" height="24" src="@/assets/img/collect.png" class="like-icon" />
          </div>
          <div class="text">收藏</div>
        </div>
        <div class="role-button button-item">
          <span>VIP会员免费看</span>
        </div>
        <div class="buy-button button-item">
          <span>订阅课程</span>
        </div>
      </div>
      <div class="bottom-bar" v-else>
        <div class="collect-button active">
          <div class="icon">
            <img
              width="24"
              height="24"
              src="@/assets/img/collect.png"
              class="like-icon"
              @click="like()"
            />
          </div>
          <div class="text">收藏</div>
        </div>
        <div class="see-button button-item">
          <span>开始学习</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KPTop from "@/components/KPTop.vue";
export default {
  components: { KPTop },
  data() {
    return {
      msg: {},
      pic: "",
      courseId: this.$route.query.id,
      num: 1,
      videoTitle: [],
      chapters: [],
      comment: [],
      user: {},
      isLogin: false
    };
  },
  methods: {
    changeTab(num) {
      this.num = num;
    }
  },
  created() {
    let id = this.$route.query.id;
    let url = `/api/v2/course/${id}`;
    let commentUrl = `/api/v2/course/${id}/comments`;
    let token = localStorage.token;
    if (token) {
      this.isLogin = true;
    }
    this.$request
      .get(url)
      .then(res => {
        this.msg = res.data;
        this.pic = res.data.course.thumb;
        // let obj = res.data.videos;
        this.chapters.push(res.data.chapters);
        let cha_id = [];
        for (let i = 0; i < this.chapters[0]["0"].length; i++) {
          cha_id.push(this.chapters[i].id);
        }
        console.log(res.data);
        console.log(cha_id);
        console.log(this.chapters[0]);
        // console.log("woshi", Vid);
        // this.videoTitle = obj[Vid];
        // console.log(this.videoTitle);
        // console.log("我是目录", res);
      })
      .catch(err => {
        console.log(err);
      });
    this.$request
      .get(commentUrl)
      .then(res => {
        // console.log(res);
        this.comment = res.data.comments;
        this.user = res.data.users["1"];
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style lang="less" scoped>
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 50px;
  overflow-y: scroll;
}

.course-thumb {
  width: 100%;
  height: auto;
  float: left;
}

.course-title {
  width: 100%;
  height: auto;
  float: left;
  box-sizing: border-box;
  padding: 15px 15px 0 15px;
  font-size: 15px;
  font-weight: 500;
  color: #171923;
  word-break: break-all;
  line-height: 15px;
  background-color: white;
}

.stat {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px 15px 15px 15px;
  font-size: 20px;
  line-height: 30px;
  background-color: white;

  .item {
    display: inline;

    &.charge {
      color: #ff4d4f;
      font-weight: 500;

      .small {
        font-size: 14px;
      }

      .value {
        font-size: 18px;
        color: #04c877 !important;
        margin-right: 15px;
      }
    }

    &.user-count {
      color: #999999;
      font-weight: 400;
      font-size: 14px;

      text {
        margin-left: 5px;
      }
    }
  }
}

.line {
  width: 100%;
  height: 10px;
  float: left;
  background-color: #f6f6f6;
  box-sizing: border-box;
}

.body {
  width: 100%;
  height: auto;
  float: left;
  box-sizing: border-box;
  padding-bottom: 53px;
  .swiper-box {
    width: 100%;
    height: auto;
    float: left;

    .swiper-box-container {
      height: 100vh;

      .swiper-item {
        position: relative;

        scroll-view {
          height: 100% !important;
        }
      }
    }
  }
}

.tabs {
  width: 100%;
  height: 55px;
  float: left;
  position: sticky;
  top: 0;
  box-sizing: border-box;
  padding-top: 10px;
  z-index: 99;
  background: rgb(255, 255, 255);
  box-shadow: 0px 2px 4px 0px rgba(204, 204, 204, 0.2);
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
  padding: 20px 80px;
  .item-tab {
    display: inline-block;
    width: auto;
    height: 15px;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    line-height: 15px;
    cursor: pointer;
    position: relative;

    &.active {
      font-weight: 600;
      color: #3ca7fa;
    }
    .actline {
      width: 20px;
      height: 3px;
      background: #3ca7fa;
      border-radius: 3px;
      position: absolute;
      left: 5px;
      top: 25px;
    }
  }
}

.coursr-desc,
.course-chapter-box,
.course-comments-box {
  width: 100%;
  height: auto;
  float: left;
  color: #333333;
  line-height: 21px;
  box-sizing: border-box;
  padding: 20px 15px 15px 15px;
}
.coursr-desc {
  .desc {
    width: 100%;
  }
}
.course-chapter-box {
  padding: 10px 15px 15px 15px;

  .chapter-item {
    width: 100%;
    height: auto;
    float: left;

    .chapter-name {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      color: #333333;
      font-weight: bold;
      margin-bottom: 20px;
      margin-top: 10px;

      .normaltran {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
      }

      .trans {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
      }
    }

    .chapter-videos-box {
      display: block;
      width: 100%;
      height: auto;
      float: left;
    }
  }

  .video-item {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0 10px 0 10px;
    background: #f6f6f6;
    border-radius: 4px;

    .video-title {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #333;

      .free {
        padding: 2px 4px;
        background-color: #04c877;
        border-radius: 2px;
        color: white;
        font-size: 12px;
        margin-right: 10px;
      }
    }

    .video-duration {
      width: auto;
      height: auto;
      font-size: 12px;
      margin-left: 10px;
      color: #999999;
    }
  }
}

.course-comments-box {
  .comment-item {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 0px;
    margin-bottom: 30px;
    display: flex;

    .avatar {
      width: 30px;
      height: 30px;
      margin-right: 10px;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    }

    .content {
      flex: 1;
      position: relative;

      .nickname {
        width: 100%;
        height: auto;
        float: left;
        font-size: 12px;
        box-sizing: border-box;
        color: #999999;
        margin-top: 5px;
        margin-bottom: 13px;
      }

      .time {
        position: absolute;
        font-size: 10px;
        color: #999999;
        right: 15px;
        top: 6px;
      }

      .text {
        width: 100%;
        height: auto;
        float: left;
        font-size: 14px;
        line-height: 1.2;
        color: #333;
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  width: 100%;
  height: 53px;
  box-sizing: border-box;
  background-color: white;
  border-top: 1px solid rgba(#000, 0.1);
  display: flex;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;

  .collect-button {
    width: 25px;
    height: auto;
    margin-right: 15px;

    .icon {
      width: 100%;
      height: 25px;
      box-sizing: border-box;
      padding-top: 5px;
      text-align: center;
      margin-bottom: 1px;

      .like-icon {
        display: inline-block;
      }
    }

    .text {
      width: 100%;
      height: 25px;
      float: left;
      line-height: 25px;
      font-size: 10px;
      font-weight: 400;
      color: #666666;
      text-align: center;
    }

    &.active {
      .icon {
        color: #ffc219;
      }
    }
  }

  .button-item {
    flex: 1;
    display: block;
    text-align: center;
    margin: 4px 0px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .buy-button {
    border-radius: 0px 4px 4px 0px;
    background-color: #ff5068;
    color: white;
  }

  .see-button {
    border-radius: 3px;
    background-color: #3ca7fa;
    color: white;
  }

  .role-button2 {
    border-radius: 3px;
    background-color: #e2a500;
    color: white;
  }

  .role-button {
    border-radius: 3px 0px 0px 3px;
    background-color: #e2a500;
    color: white;
  }

  .input {
    flex: 1;
    padding-top: 10px;

    input {
      width: 100%;
      height: 22px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      box-sizing: border-box;
      margin-top: 8px;
      border: none;

      &:focus {
        outline: none;
      }
    }
  }

  .comment-button {
    width: auto;
    height: 33px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 33px;

    padding-left: 15px;
    padding-top: 10px;

    &.active {
      color: #1784ed;
    }
  }
}
.show {
  display: block;
}
.hide {
  display: none;
}
</style>

